<template>
  <el-menu
    class="s-menu-list"
    :default-active="useRoute().path"
    :collapse="collapse"
    router
  >
    <template v-for="menu in menuData" :key="menu.index">
      <s-menu-item :menu="menu" />
    </template>
  </el-menu>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { menuData } from '@/router/menu'
import SMenuItem from './menu-item.vue'
defineOptions({
  name: 's-menu-list',
})

defineProps<{
  collapse: boolean
}>()
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
// 文字禁止选中
.s-menu-list {
  user-select: none;
  .el-sub-menu.is-active {
    > .el-sub-menu__title {
      color: var(--el-menu-active-color);
    }
  }
}
</style>
